import {
  Directive,
  ElementRef,
  HostListener,
  Renderer2,
  Input
} from "@angular/core";

@Directive({
  selector: "[add-img-control]"
})
export class ImgControlDirective {
  constructor(
    private el: ElementRef<HTMLEmbedElement>,
    private rd2: Renderer2
  ) {}

  @Input("add-img-control") widthRadio: number;

  @HostListener("dragstart", ["$event"]) onDragstart(e: Event) {
    e.preventDefault();
  }

  @HostListener("window:resize") @HostListener("load") onChange() {
    this.resetHeight();
  }

  private resetHeight() {
    this.rd2.setAttribute(
      this.el.nativeElement,
      "height",
      Math.ceil(
        Number(this.el.nativeElement.width) * (this.widthRadio || 0.6)
      ).toString()
    );
  }
}
